<template>
  <div id="echarts4"></div>
</template>
<script>
export default {
  data() {
    return {
      timeInterval: null,
    }
  },
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
  },

  mounted() {
    this.showEcharts4()
  },
  beforeDestroy() {
    clearInterval(this.timeInterval)
  },
  created() {},
  methods: {
    showEcharts4() {
      let myChart = this.$echarts.init(document.getElementById('echarts4'))
      let xaxisData = this.data.map((v) => v.name)
      let yaxisData = this.data.map((v) => v.value)
      const color = ['rgba(234,234,38,.9)', 'rgba(254,86,86,.9)', '#FE5656', '#01E17E', '#3DD1F9', '#FFAD05'] //2个以上的series就需要用到color数组
      const color2 = ['rgba(234,234,38,.3)', 'rgba(254,86,86,.3)']
      let option = {
        tooltip: {
          show: false,
        },
        yAxis: [
          {
            name: '(个)',
            nameTextStyle: {
              color: '#fff',
              fontWeight: 400,
              fontSize: 14,
            },
            axisLabel: {
              color: '#fff',
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255,255,255,.4)',
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
          {
            type: 'value',
            gridIndex: 0,
            // min: 50,
            // max: 100,
            // splitNumber: 8,
            splitLine: {
              lineStyle: {
                // 设置背景横线
                normal: {
                  color: 'red', // 折线线条颜色:红色
                },
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            splitArea: {
              show: false,
              // areaStyle: {
              //   color: ['rgba(7, 28, 47, 0.8)', 'rgba(10, 34, 56, 0.8)'],
              // },
            },
          },
        ],
        xAxis: {
          data: xaxisData,
          show: true, //显示x轴+x轴label文字
          type: 'category',
          boundaryGap: false, //从Y轴出发，这个false很好的
          axisLine: {
            show: true, //显示x坐标轴轴线
            lineStyle: {
              color: 'rgba(255,255,255,.4)',
            },
          },
          axisTick: {
            show: false, //不显示x坐标1cm刻度
          },
          axisLabel: {
            // color: '#ffffff', //x轴label文字颜色
            // interval: 0, //这个一定要有，别忘记了
            // rotate: 15,
            textStyle: {
              color: '#fff',
              fontSize: 10,
            },
          },
          splitLine: {
            show: false, //不显示grid竖向分割线
          },
        },
        grid: {
          top: '15%',
          left: 8,
          right: 8,
          bottom: 15,
          containLabel: true,
        },
        dataZoom: [
          {
            xAxisIndex: 0, //这里是从X轴的0刻度开始
            show: false, //是否显示滑动条，不影响使用
            type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 5, // 一次性展示6个。
          },
        ],
        series: [
          {
            type: 'line',
            data: yaxisData,
            smooth: true,
            symbol: 'emptyCircle', //空心小圆点。线条小圆点形状
            symbolSize: 6, //小圆点大小
            itemStyle: {
              //还是小圆点设置
              color: 'rgba(254,86,86,1)',
            },
            //柱形图上方标题
            label: {
              //显示小圆点上的label文字
              normal: {
                show: true,
                position: 'top',
                // offset: [0, 2],
                // distance: 30,
                textStyle: {
                  color: '#fff',
                  fontSize: 12,
                },
                formatter: function (a) {
                  return `${a.value}`
                },
              },
            },
            lineStyle: {
              width: 1, //线条设置
              color: 'rgba(254,86,86,1)'
            },
            areaStyle: {
              //填充线条下面的面积区域颜色。（areaStyle只是锦上添花）
              opacity: 0.2,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(254,86,86,.9)', // 上处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(254,86,86,.3)', // 下处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        ],
      }
      //自动滚动
      this.timeInterval = setInterval(() => {
        // 每次向后滚动一个，最后一个从头开始。
        //判断是否滑动到最后一条数据，若是，则重置柱状图（显示前6条数据）
        if (option.dataZoom[0].endValue == xaxisData.length) {
          option.dataZoom[0].endValue = 5
          option.dataZoom[0].startValue = 0
        } else {
          option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
          option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
        }
        myChart.setOption(option)
      }, 1600)

      // myChart.setOption(option)
    },
  },
}
</script>
